<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="/static/style/common.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c_file_upload_div {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .c_uploadfile_label_info {
            margin-left: 100px;
        }

        .c_table th {
            background-color: rgb(230, 230, 230);
            height: 40px;
            font: 16px/40px "Microsoft YaHei UI";
            font-weight: bold;
        }

        .c_table td {
            height: 40px;
            /*width: 200px;*/
            text-align: center;
            vertical-align: middle;
        }

        .c_table .c_ordinal {
            width: 100px;
        }

        .c_table .c_name {
            width: 200px;
        }

        .c_table .c_address {
            width: 200px;
        }

        .c_table .c_imagesid {
            width: 200px;
        }

        .c_table .c_hostname {
            width: 200px;
        }

        .c_table .c_status {
            width: 80px;
        }

        .c_table .c_action {
            width: 120px;
        }

        tr:nth-child(even) {
            background-color: #f5fafe;
        }

        tr:hover {
            background-color: #dafdf3;;
        }

        .c_action_td {
            width: 200px;
        }

        /*普通按钮样式一*/
        .c_action_button_sty_disenabled {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            /*background-color: rgb(200, 200, 200);*/
            border: 1px solid lightpink;
            color: rgb(55, 101, 124);
            outline: none;
        }

        .c_action_button_sty01 {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(200, 200, 200);
            border: 1px solid rgb(239, 240, 242);
            text-align: center;
            color: rgb(55, 101, 124);
            outline: none;
        }

        /*普通按钮样式一 hover*/
        .c_action_button_sty01:hover {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(156, 183, 202);
            border: 1px solid rgb(239, 240, 242);
            color: rgb(55, 101, 124);
            text-align: center;
            outline: none;
        }

    </style>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function container_action(hostaddress, action, id, name, status) {
            if (action == '删除') {
                if (status == '运行中') {
                    alert('容器正在运行中!');
                    return;
                }
            }

            $.ajax({
                url: '/managercontainer',
                type: 'POST',
                dataType: 'json',
                data: {
                    action: action,
                    id: id,
                    name: name,
                    hostaddress: hostaddress
                },
                success: function (data) {
                    if (data.status == true) {
                        alert('执行任务成功！');
                        window.location.reload(true);
                    } else {
                        alert(data.error);
                        window.location.reload(true);
                    }
                },
                error: function (data) {
                    alert(data.error);
                }
            });

        };

        $(function () {
        });
    </script>

</head>
<body>


<div class="c_um_table">
    <table id="idTable" class="c_table">
        <tr class="c_table_head">
            <th class="c_ordinal">序号</th>
            <th class="c_imagesid">容器ID</th>
            <th class="c_name">名称</th>
            <th class="c_hostname">主机名</th>
            <th class="c_address">状态</th>
            <th class="c_action">操作</th>
        </tr>


        {% for item in container_list %}
        <tr class="c_trList">
            <td>{{item.count}}</td>
            <td class="c_td_class">{{item.Id}}</td>
            <td><a href="">{{item.Names}}</a></td>
            <td>{{item.hostname}}</td>

            <!--已停止 -->
            <!--运行中-->
            {%if item.Status == '运行中'%}
            <td style="color: green;">{{item.Status}}</td>
            {%else%}
            <td style="color: red;">{{item.Status}}</td>
            {%endif%}

            <td class="c_action_td">

                <input name={{item.Names}} id={{item.Id}} type="button" value="删除"
                       class="class_button_action c_action_button_sty01"
                       onclick=container_action("{{item.hostaddr}}","删除","{{item.Id}}","{{item.Names}}","{{item.Status}}")>

                {%if item.Status == '运行中'%}
                <input name={{item.Names}} id={{item.Id}} type="button" value="停止"
                       class="class_button_action c_action_button_sty01"
                       onclick=container_action("{{item.hostaddr}}","停止","{{item.Id}}","{{item.Names}}","{{item.Status}}")>
                {%else%}
                <input name={{item.Names}} id={{item.Id}} type="button" value="启动"
                       class="class_button_action c_action_button_sty01"
                       onclick=container_action("{{item.hostaddr}}","启动","{{item.Id}}","{{item.Names}}","{{item.Status}}")>
                {%endif%}


            </td>
        </tr>
        {% endfor %}

    </table>

</div>

</body>
</html>